<template>
  <div class="grid-column">
    <em-card
      :title="headerOptions.title"
      class="grid-column-card"
      no-border
      :roundless="roundless"
      :background="background"
    >
      <template
        v-if="headerOptions.tag"
        slot="subtitle"
      >
        <card-tag-cell v-model="headerOptions.tag" />
      </template>
      <template
        v-if="headerOptions.linkText"
        slot="toolbar"
      >
        <span>{{ headerOptions.linkText }}</span>
        <em-icon
          v-if="headerOptions.weblink"
          name="arrow-right"
        />
      </template>
      <div class="goods-list">
        <em-goods-block
          v-for="(goods,index) in items"
          :key="index"
          :thumb="goods.thumb"
          :title="goods.title"
          title-inner
          :show-title="false"
          centered
        />
      </div>
    </em-card>
  </div>
</template>

<script>
import CardTagCell from './CardTagCell'
import { backgroundImage } from '@/utils/styles'
export default {
  name: 'GridColumn',
  components: {
    CardTagCell
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      header: {
        title: '买家推荐',
        tag: '全民口碑'
      }
    }
  },
  computed: {
    options: {
      get() {
        return this.value
      },
      set(v) {
        this.value = v
      }
    },
    styles() {
      if (this.options && this.options.styles) {
        return this.options.styles
      }
      return null
    },
    headerOptions() {
      if (this.options && this.options.header) {
        return this.options.header
      }
      return this.header
    },
    setting() {
      if (this.options && this.options.setting) {
        return this.options.setting
      }
      return null
    },
    roundless() {
      if (this.styles && this.styles.radius) {
        return false
      }
      return true
    },
    background() {
      return backgroundImage(this.styles && this.styles.background)
    },
    columnSize() {
      if (this.setting && this.setting.cols) {
        return this.setting.cols
      }
      return 4
    },
    items() {
      var items = []
      if (this.options && this.options.items) {
        items = this.options.items
      }
      return items.concat(
        new Array(this.columnSize - items.length).fill({
          thumb:
            'https://multi.niuteam.cn/public/static/ext/diyview/img/crack_figure.png',
          title: '商品名称',
          originPrice: '139.00',
          price: '99.00'
        })
      )
    }
  },
  mounted() {
    this.options = this.value
  }
}
</script>

<style lang="scss" scoped>
.grid-column {
  padding: 0 10px;
  &-card {
    background-size: 100% auto;
    background-position: left top;
    background-repeat: no-repeat;

    .em-card__header {
      padding: 10px;
      min-height: initial;
    }
    .em-card__body {
      padding: 0 5px;
    }
  }
  .goods-list {
    display: flex;
    > * {
      flex: 1;
      padding: 10px 5px;
    }
  }
}
</style>
